<template>
    <div class="wrapper">
        <div class="left">
            <el-menu
                class="el-menu-vertical-demo"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b"
                router>
                <el-submenu :index="item.path" v-for="(item,index) in list">
                    <template slot="title">
                    <i class="el-icon-location"></i>
                    <span>{{item.authName}}</span>
                    </template>
                    <el-menu-item-group v-for="(children,index) in item.children">
                    <el-menu-item :index="children.path">{{children.authName}}</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
            </el-menu>
        </div>
        <div class="right">
            <div class="header">
                <el-button class="btn" type="danger" @click="out">退出登录</el-button>
            </div>
            <div class="nav">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

<script>
import {Menu} from '../api/user.js'
    export default {
        data() {
            return {
                list:[]
            };
        },
        mounted(){
            this.getMenu()
        },
        methods:{
            async getMenu(){
                let res = await Menu();
                console.log(res);
                this.list=res.data.data
            },
            out(){
                this.$router.push('/')
                localStorage.removeItem('token')
            }
        }
    }
</script>

<style lang="scss" scoped>
.wrapper{
    width: 100%;
    height:100%;    
    display: flex;

    .left{
        width: 200px;
        height: 100%;
        background: #545c64;
    }
    .right{
        flex: 1;
        height: 100%;
        .header{
            width: 100%;
            height: 70px;
            border-bottom: 1px solid #ccc;
            .btn{
               
                float: right;
            }
        }
        .nav{
            width: 100%;
            max-height: 891px;
        }
    }
}
</style>